<template>
    <div id="app">
        <h2>测试题</h2>
        <subject :list="list"></subject>
        <div>
            <flag :list="list"></flag>
        </div>
    </div>
</template>
<script setup>
import Subject from './components/SubjectItem.vue'
import Flag from './components/FlagItem.vue'
import { ref, onBeforeMount } from 'vue'
const list = ref([])

onBeforeMount(() => {
    // 产生5道题目
    let a,b
    for(let i = 0; i < 5; i ++) {
        a = Math.floor(Math.random() * 10)
        b = Math.floor(Math.random() * 10)
        list.value.push({
            a: a,
            b: b,
            sum: 0, // 存用户输入的答案
            done: '未完成'
        })
    }
})
</script>
<style scoped>
#app {
    background-color: #fff;
    width: 500px;
    margin: 50px auto;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
    padding: 2em;
}
</style>